import React from "react";
import { removeAction } from "./store/actionCreator";

// 第二步, 从react-redux解构connect方法
// connect是一个函数，函数的执行结果是一个高阶组件
import { connect } from "react-redux";
// connect还要接收两个参数
// 将仓库的state，映射到组件，成为组件的props
const mapStateToProps = (state) => {
  return {
    list: state.list,
  };
};
// 将仓库的Dispatch的方法，映射到组件，成为组件的props
const mapDispatchToProps = (dispatch) => {
  return {
    remove(id) {
      dispatch(removeAction(id));
    },
  };
};

const List = (props) => {
  // console.log(props);
  return (
    <ul>
      {props.list.map((item) => (
        <li key={item.id}>
          {item.name} -{" "}
          <button onClick={() => props.remove(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

// const List2 = connect(mapStateToProps, mapDispatchToProps)(List);

export default connect(mapStateToProps, mapDispatchToProps)(List);
